<template>
  <div>
    <contentshow :list="topicList"  @refreshData="updateOneTopic"></contentshow>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getTopicRecommend,
} from "../../api/recommend";
import {findbytid} from "../../api/topic"
import { timeQuantum } from "../../util/timeQuantum";
import Contentshow from '../contentshow/ContentShow';
export default {
  components: {Contentshow},
  name: "Recommend",
  data() {
    return {
      list: [],
      topicList: [],
      pageNum: 1,
      pageSize: 5,
      pageTotal: 0,
      isShow: true,
    };
  },
  created() {
    this.getMyTopic();
  },
  methods: {
    updateOneTopic(index) {

      let data = {
        uid: localStorage.getItem("uid"),
        tid: this.topicList[index].tid
      }
      findbytid(data).then(res => {
        if (res.code == 200) {
          let topic = res.data

          var d = document.createElement("div");
          d.innerHTML = topic.content;
          let text = d.innerText
          if (text.length > 80) {
            topic.text = text.slice(0,80) + "...";
          } else {
            topic.text = text.slice(0,40) + "...";
          }
          // 统一id
          topic.id = topic.tid
          // 内容展示
          topic.tag = false;
          // 评论展示
          topic.disShow = true

          // 修改时间的展示方式
          topic.createtime = timeQuantum(
            topic.createtime
          );

          this.list[(this.pageNum - 1) * this.pageSize + index] = topic
          this.topicList = this.list.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)

          this.$forceUpdate
        }
      })
    },
    getMyTopic() {
      // console.log("获取数据");
      let data = {
        uid: localStorage.getItem("uid")
      }
      getTopicRecommend(data).then((res) => {
        if (res.code == 200) {
          // 分页数据
          this.pageTotal = res.data.length;

          let list = res.data;
          var d = document.createElement("div");
          for (let index = 0; index < list.length; index++) {
          // 获取话题内容的文本（用来简略展示）
            d.innerHTML = list[index].content;
            let text = d.innerText
            if (text.length > 80) {
              list[index].text = text.slice(0,80) + "...";
            } else {
              list[index].text = text.slice(0,40) + "...";
            }
            // 统一id
            list[index].id = list[index].tid
            // 内容展示
            list[index].tag = false;
            // 评论展示
            list[index].disShow = true

            // 修改时间的展示方式
            list[index].createtime = timeQuantum(
              list[index].createtime
            );
          }
          this.list = list
          this.topicList = list.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
        }
      });
    },
    handlePageChange(val) {
      // this.$set(this., "pageNum", val);
      this.pageNum = val
      this.topicList = this.list.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
      this.$forceUpdate()
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: 0px auto;
  padding: 20px 0px;
  text-align: center;
  background-color: #fff;
}
</style>
